<template>
<div>
  <el-form class="login-container" label-position="left"
           label-width="0px" v-loading="loading">
    <h3 class="login_title">系统登录</h3>
    <el-form-item prop="account">
      <el-input type="text" :prefix-icon="User"  @keyup.enter="login"   v-model="loginForm.realname" auto-complete="off" placeholder="账号"></el-input>
    </el-form-item>
    <el-form-item prop="checkPass">
      <el-input type="password"  @keyup.enter="login"   :prefix-icon="Lock" v-model="loginForm.password" auto-complete="off" placeholder="密码"></el-input>
    </el-form-item>
    <el-checkbox class="login_remember" v-model="checked" label-position="left">记住密码</el-checkbox>
    <el-form-item style="width: 100%">
      <el-button type="primary"  style="width: 100%" @click="login">登录</el-button>
    </el-form-item>
  </el-form>
  <el-divider></el-divider>
  <el-descriptions title="登录说明（建议分辨率：1920*1080）" style="margin-left:100px;width:60%" :column="2" border>
    <el-descriptions-item :labelStyle="{'width':'120px'}">
      <template slot="label">
        <i class="el-icon-user"></i>
        超级用户名
      </template>
      root （<span style="color:#901010">注意：可以查看所有功能，但是不要进行业务操作</span>）
    </el-descriptions-item>
    <el-descriptions-item :labelStyle="{'width':'120px'}">
      <template slot="label" >
        <i class="el-icon-mobile-phone"></i>
        密码
      </template>
      123
    </el-descriptions-item>
    <el-descriptions-item :labelStyle="{'width':'120px'}">
      <template slot="label">
        <i class="el-icon-user"></i>
        挂号用户名
      </template>
      挂号
    </el-descriptions-item>
    <el-descriptions-item :labelStyle="{'width':'120px'}">
      <template slot="label" >
        <i class="el-icon-mobile-phone"></i>
        密码
      </template>
      123
    </el-descriptions-item>
    <el-descriptions-item :labelStyle="{'width':'120px'}">
      <template slot="label">
        <i class="el-icon-user"></i>
        医生用户名
      </template>
      扁鹊（范无病、华佗、葛洪等） <span style="color:#901010">注意：需要根据登录医生查看患者</span>
    </el-descriptions-item>
    <el-descriptions-item :labelStyle="{'width':'120px'}">
      <template slot="label" >
        <i class="el-icon-mobile-phone"></i>
        密码
      </template>
      123
    </el-descriptions-item>
    <el-descriptions-item :labelStyle="{'width':'120px'}">
      <template slot="label">
        <i class="el-icon-user"></i>
        检查用户名
      </template>
      检查
    </el-descriptions-item>
    <el-descriptions-item :labelStyle="{'width':'120px'}">
      <template slot="label" >
        <i class="el-icon-mobile-phone"></i>
        密码
      </template>
      123
    </el-descriptions-item>
        <el-descriptions-item :labelStyle="{'width':'120px'}">
      <template slot="label">
        <i class="el-icon-user"></i>
        检验用户名
      </template>
      检验
    </el-descriptions-item>
    <el-descriptions-item :labelStyle="{'width':'120px'}">
      <template slot="label" >
        <i class="el-icon-mobile-phone"></i>
        密码
      </template>
      123
    </el-descriptions-item>

    <el-descriptions-item :labelStyle="{'width':'120px'}">
      <template slot="label">
        <i class="el-icon-user"></i>
        处置用户名
      </template>
      处置
    </el-descriptions-item>

    <el-descriptions-item :labelStyle="{'width':'120px'}">
      <template slot="label" >
        <i class="el-icon-mobile-phone"></i>
        密码
      </template>
      123
    </el-descriptions-item>

    <el-descriptions-item :labelStyle="{'width':'120px'}">
      <template slot="label">
        <i class="el-icon-user"></i>
        药房用户名
      </template>
      药房
    </el-descriptions-item>

    <el-descriptions-item :labelStyle="{'width':'120px'}">
      <template slot="label" >
        <i class="el-icon-mobile-phone"></i>
        密码
      </template>
      123
    </el-descriptions-item>

  </el-descriptions>
</div>
</template>
<script>

import {getLocalStorage, removeLocalStorage, setLocalStorage, setSessionStorage} from '../util/common'
import {User,Lock} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";

  export default{
    computed: {
      User() {
        return User
      },
      Lock(){
        return Lock
      }
    },
    data(){
      return {
        checked: false,
        loginForm: {
          realname: '',//扁鹊,
          password: '',//123
        },
        loading: false
      }
    },
    methods:{

      login:function (){
        console.log(this.loginForm)
        let url='/employee/login'
        this.$axios.post(url,this.loginForm).then(resp=>{
          this.loginForm=resp.data.result
          if(this.loginForm!=null && this.loginForm!='')
          {
            ElMessage({
              type:'info',
              message:'登录成功，欢迎！'
            })
            //把用户信息存在sessionstorary
           setSessionStorage("userLogin",this.loginForm)
            //是否记住用户和密码
            if(this.checked)
            {
              //保存
              setLocalStorage("remember_password_username",this.loginForm)
            }
            else {
              //清除
              removeLocalStorage("remember_password_username")
            }
           // this.$router.push('/home')
            this.$router.replace('/home')
          }
          else {
            this.loginForm={}
           ElMessage(
               {
                 type:'warning',
                 message:'登录失败'
               }
           )
          }
        }).catch(error=>{
          console.log(error)
        })
      }
    },
    mounted() {
      //读取
      let user=getLocalStorage("remember_password_username")
      console.log(user)
      if(user!=null)
      {
        this.checked=true
        //给对象属性赋值
        this.loginForm.realname=user.realname
        this.loginForm.password=user.password
      }
      else {
        //给对象属性赋值
        this.loginForm.realname=''
        this.loginForm.password=''
      }

    }
  }
</script>
<style scope>
.login-container {
  border-radius: 15px;
  background-clip: padding-box;
  margin: 100px auto;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}

.login_title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}

.login_remember {
  margin: 0px 0px 35px 0px;
  text-align: left;
}
</style>
